<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        th,
        td {
            width: 200px;
            height: 40px;
            border: 1px solid black;
        }
    </style>
</head>

<body>
    用户名：<input type="text" class="yhm"><br>
    年龄：<input type="text" class="nl"><br>
    <button onclick="add()">添加</button>
    <table>
        <thead>
            <tr>
                <th>全选<input type="checkbox" class="qxx" onclick="f()"></th>
                <th>用户名</th>
                <th>年龄</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>

        </tbody>
    </table>
</body>

</html>
<script>
    var yhm = document.querySelector(".yhm")
    var nl = document.querySelector(".nl")
    var tbody = document.querySelector("tbody")
    var qs = document.querySelector(".qxx")
    function set(arr) {
        localStorage.setItem('data', JSON.stringify(arr))
    }
    function get() {
        var data = localStorage.getItem('data')
        if (data != null) {
            return JSON.parse(data)
        } else {
            return []
        }
    }
    function add() {
        var data = get()
        data.push({
            yhm: yhm.value,
            nl: nl.value
        })
        set(data)
        xr()
    }
    function xr() {
        tbody.innerHTML = ''
        var data = get();
        for (i = 0; i < data.length; i++) {
            var tr = document.createElement('tr')
            if (qs.checked) {
                tr.innerHTML = `
            <td><input type="checkbox" class="qx" checked onclick='asd()'></td>
            <td>${data[i].yhm}</td>
            <td>${data[i].nl}</td>
            <td><button onclick='sc(${i})'>删除</button></td>
        `;
            } else {
                tr.innerHTML = `
            <td><input type="checkbox" class="qx" onclick='asd()'></td>
            <td>${data[i].yhm}</td>
            <td>${data[i].nl}</td>
            <td><button onclick='sc(${i})'>删除</button></td>
        `;
            }
            tbody.appendChild(tr)
            yhm.value = ''
            nl.value = ''
        }
    }
    xr()
    function sc(xb) {
        if (confirm('确定要删除吗?')) {
            var data = get();
            data.splice(xb, 1)
            set(data)
            xr()
        }
    }
    function f() {
        var qx = document.querySelectorAll('.qx')
        for (i = 0; i < qx.length; i++) {
            qx[i].checked = qs.checked
        }
    }
    // function asd(){
    //     var qx=document.querySelectorAll('.qx')
    //     for(i=0;i<qx.length;i++){
    //         qx[i].onclick=function(){
    //             var status=document.querySelectorAll('.qx:checked')
    //             if(status.length==qx.length){
    //                 qs.checked=true
    //             }else{
    //                 qs.checked=false
    //             }
    //         }
    //     }
    // }
    function asd(){
        var qx=document.querySelectorAll('.qx')
        for(i=0;i<qx.length;i++){
            qx[i].onclick=function(){
                var status=document.querySelectorAll(".qx:checked")
                if(status.length==qx.length){
                    qs.checked=true
                }else{
                    qs.checked=false
                }
            }
        }
    }
</script>